window.onload=function () {
  let aid = getParameter('aid')
  if (isNaN(aid)) {
    alert("没有携带 aid 或者 aid 不是数字")
    return
  }
  let xhr = new XMLHttpRequest()
  xhr.open('get', '/album-detail.json?aid=' + aid)
  xhr.onload=function () {
    console.log(this.responseText)
    let data = JSON.parse(this.responseText)
    render(data)
  }
  xhr.send()
}

function render(album) {
  if (album.trackList.length === 0) {
    alert('专辑中一首音频都没有')
    return
  }
  
  var oWrapper = document.querySelector('.wrapper')
  var oCover = document.querySelector('.cover')
  var oTitle = document.querySelector('.name')
  var oArtist = document.querySelector('.artist')
  var oAudio = document.querySelector('#main-audio')
  var playPauseBtn = document.querySelector('.play-pause')
  var prevBtn = document.querySelector('#prev')
  var nextBtn = document.querySelector('#next')
  var oProgressBar = document.querySelector('.progress-bar')
  var oProgressArea = document.querySelector('.progress-area')
  var oCurrent = document.querySelector('.current')
  var oDuration = document.querySelector('.duration')
  var oMusicList = document.querySelector('.music-list')
  var closeBtn = document.querySelector('#close')

  // 当前哪首歌
  var index = 0
  let track = album.trackList[index]
  oCover.src = album.cover
  oArtist.textContent = album.username

  function reRender(track) {
    oTitle.textContent = `${album.title} - ${track.title}`
    oAudio.src = `/track?tid=${track.tid}`
  }

  reRender(track)

//  oAudio.addEventListener('loadeddata', function () {
//    let audio = oAudio
//    var duration=audio.duration
//    console.log(duration)
//    let durationMin = Math.floor(duration / 60)
//    let durationSec = Math.floor(duration % 60)
//    if (durationSec < 10) {
//      durationSec = '0' + durationSec
//    }
//    oDuration.textContent = `${durationMin}:${durationSec}`
//  })

  oAudio.addEventListener('timeupdate', function (e) {
    var audio=e.target
    if (audio.duration === Infinity) {
        audio.currentTime = 1e101;
        audio.ontimeupdate = function () {
            this.ontimeupdate = () => {
                  return;
           };
            audio.currentTime = 1e101;
            audio.currentTime = 0;
       };
   }

    var current = audio.currentTime
    var duration = audio.duration
    console.log(duration)

    let durationMin = Math.floor(duration / 60)
    let durationSec = Math.floor(duration % 60)
    if (durationSec < 10) {
        durationSec = '0' + durationSec
    }
    oDuration.textContent = `${durationMin}:${durationSec}`

    let progressWidth = (current / duration) * 100
    if (!isNaN(progressWidth)) {
      oProgressBar.style.width = progressWidth + '%'
    }

    let currentMin = Math.floor(current / 60)
    let currentSec = Math.floor(current % 60)
    if (currentSec < 10) {
      currentSec = '0' + currentSec
    }
    oCurrent.textContent = `${currentMin}:${currentSec}`
  })

  oProgressArea.addEventListener('click', function (e) {
    let progressWidth = oProgressArea.clientWidth
    let clickedOffsetX = e.offsetX
    let duration = oAudio.duration
    oAudio.currentTime = (clickedOffsetX / progressWidth) * duration
    play()
  })

  oAudio.onended = function() {
    next()
  }
//  oAudio.addEventListener('ended', function () {
//    next()
//  })
  
  function play() {
    oWrapper.classList.add('playing')
    playPauseBtn.querySelector('i').className = 'fas fa-pause'
    oAudio.play()
  }

  function pause() {
    oWrapper.classList.remove('playing')
    playPauseBtn.querySelector('i').className = 'fas fa-play'
    oAudio.pause()
  }
  
  function prev() {
    index--
    if (index === -1) {
      index = album.trackList.length - 1
    }
    track = album.trackList[index]
    reRender(track)
    play()
  }

  function next() {
    index++
    if (index === album.trackList.length) {
      index = 0
    }
    track = album.trackList[index]
    reRender(track)
    play()
  }

  prevBtn.addEventListener('click', function () {
    prev()
  })

  nextBtn.addEventListener('click', function () {
    next()
  })

  playPauseBtn.addEventListener('click', function () {
    if (oWrapper.classList.contains('playing')) {
      pause()
    } else {
      play()
    }
  })
}